<template>
  <el-collapse-transition>
    <div>
      <el-upload
        ref="upload"
        drag
        class="upload-demo"
        style="text-align: center;"
        :action="imageAction"
        :headers="{ 'Authorization': 'Bearer ' + authToken }"
        :file-list="fileList"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
        :before-remove="beforeRemove"
        :limit="1"
        :on-exceed="handleExceed"
      >
        <div style="align-content: center;justify-content: center;margin: 0 auto;">
          <i class="el-icon-upload" style="font-size: 100px;" />
          <div class="el-upload__text" style="font-size: 28px;">将文件拖到此处，或<em>点击任意处上传</em></div>
        </div>
      </el-upload>

      <el-dialog
        title="确认"
        :visible.sync="dialogVisible"
        width="30%"
        @close="resetDialog"
      >
        <span>是否导入到数据库?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="importCancel">取消</el-button>
          <el-button type="primary" @click="importToDb">确认</el-button>
        </span>
      </el-dialog>
    </div>
  </el-collapse-transition>
</template>

<script>
import { ediDataReturn, filePathToDb } from '@/api/edi'

export default {
  name: 'FileImportDb',
  data() {
    return {
      fileList: [],
      imageAction: process.env.VUE_APP_BASE_API + '/newsDeclare/upload/file',
      authToken: this.$store.state.user.token,
      dialogVisible: false,
      uploadedFileName: ''
    }
  },
  methods: {
    handleExceed(files, fileList) {
      this.$notify({
        type: 'error',
        message: '只支持单文件上传'
      })
    },
    handleSuccess(response, file) {
      if (response.code != 10000) {
        this.$notify.error({
          title: '错误',
          message: response.message
        })
      } else {
        this.uploadedFileName = file.name
        this.dialogVisible = true
        const list = {
          name: file.name,
          url: response.data
        }
        this.fileList.push(list)
      }
    },
    beforeUpload(file) {
      const isLtSize = file.size / 1024 / 1024 < 50
      if (!isLtSize) {
        this.$message.error('最大支持 50MB!')
      }
      return isLtSize
    },
    beforeRemove(file) {
      const filterArr = this.fileList.filter(item => item.uid != file.uid)
      this.fileList = filterArr
    },
    importCancel() {
      this.dialogVisible = false
      this.fileList = []
    },
    importToDb() {
      // 调用导入数据库的接口
      filePathToDb({ file_name: this.fileList[0].url }).then(response => {
        this.loading = false
        if (response.code == 10000) {
          this.$notify({
            type: 'success',
            message: '导入成功'
          })
        }
      })

      this.fileList = []
      this.dialogVisible = false
    },
    resetDialog() {
      this.uploadedFileName = ''
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .upload-demo {
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  background-color: #fafafa;
  cursor: pointer;
  text-align: center;
  height: calc(100vh - 150px) ;
  .el-upload{
    width: 100%;
    height: 100%;
    .el-upload-dragger{
      width: 100%;
      height: 100%;
      display: flex;
      //flex-direction: column;
    }
  }
}
</style>
